<template>
  <Page name="账单" >
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <div class="filter" @click="openPup">
      <img src="~/assets/img/ic_bill_filter.png" alt="">
    </div>
    <ScrollList :config="config" @bottom="getPage(filerId)"  @pull="pull">
    <div class="bill"  v-for="(item,key) in list" :key="key">
      <div class="month" v-if="list.length!=0">
        <h4>{{item.count_months.month}}</h4>
        <p>支出:{{item.count_months.out}}</p>
        <p>收入:{{item.count_months.income}}</p>
      </div>
      <ul class="list">
        <li v-for="child in item.list" :key="child.bill_id" @click="goToDetils(child)">
          <div class="header-img">
            <img :src="child.logo" alt="">
          </div>
          <div class="info">
            <h4>
              <span>{{child.remark}}</span>
              <span :class="child.fee_status==1 ? 'reduce' : ''" v-html="group(child.amount)"></span>
            </h4>
            <p class="sub_remark" v-if="child.sub_remark!=''">{{child.sub_remark}}</p>
            <p>
              <span>{{child.pay_time_str}}</span>
              <span :class="child.fee_status== 0 ? 'on' : ''">{{child.status_str}}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
    </ScrollList>
    <ui-empty :empty="empty" v-if="!Object.keys(list).length"></ui-empty>

    <!-- 筛选 -->
    <div class="pup-common" v-if="pupStatus" >
      <div class="mask"  @click="pupStatus=false"></div>
      <div class="con">
        <ul>
          <li v-for="(item,index) in filtersList" :class="item.index== idx ? 'active': 0" @click="filters(item,index)">
            {{item.text}}
          </li>
        </ul>
        <footer>
          <button @click="pupStatus=false">取消</button>
          <button @click="getFiltersDate">确定</button>
        </footer>
      </div>
    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';
import ScrollList from '~/components/ScrollList';
import UILoading from  "~/components/loading";
import UiEmpty from  "~/components/empty";
export default {
  components: {
    Page,
    ScrollList,
    [UILoading.name]: UILoading,
    UiEmpty
  },
  data() {
    return {
      idx:!this.$utils.getUrlKey("id") ? "" : this.$utils.getUrlKey("id"),
      filtersList:[
        {
          text:"全部分类",
          id:"",
          index:0
        },
        {
          text:"线下消费",
          id:101,
          index:1
        },
        {
          text:"转账",
          id:12,
          index:2
        },
        {
          text:"还款",
          id:4,
          index:3
        },
        {
          text:"充值",
          id:2,
          index:4
        },
        {
          text:"提现",
          id:3,
          index:5
        },
        {
          text:"预授权",
          id:6,
          index:6
        },
        {
          text:"退款",
          id:9,
          index:7
        },
        {
          text:"代付",
          id:100,
          index:8
        },
        {
          text:"网购",
          id:1,
          index:9
        },

      ],
      pupStatus:false,
      list: {},
      count_months:{},
      initLoading:true,
      config:{
        bottom:false,
        pull:false,
        end:false,
      },
      page:1,
      total:1,
      loading:false,
      empty:{
        text:"暂无数据"
      },
      filerId:''
    };
  },
  mounted(){
    if(this.$utils.getUrlKey("id")==5){
      this.filerId=3;
    }else if(this.$utils.getUrlKey("id")==6){
      this.filerId=6;
    }else{
      this.filerId='';
    }
    (async ()=>{
      await this.getPage(this.filerId,true);
    })();
  },

  methods: {
    group(str){
      return str.replace(/\n/g,'</br>')
    },
    filters(item,index){
      this.idx = item.index;
      this.filerId = item.id;
    },
    getFiltersDate(){
      this.initLoading = true;
      this.config.end=false;
      this.page=1;
      this.loading=false;
      this.list={};
      this.pupStatus=false;
      this.getPage(this.filerId,true);
    },
    goToDetils(item){
      this.$router.push({name:'bill-bill-details',query:{bill_id:item.bill_id}})
    },
    async pull(cb){
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      await this.getPage(this.filerId ,true);
      this.$nuxt.$loading.finish();
      cb();
    },
    async getPage(type,isRefresh){
      if(this.loading || this.config.end) return false;
      this.loading = true;
      try{
        let { data:rs } = await this.$axios.post('?ct=api&ac=bill_order',{
          page:this.page,
          type:type
        })
        if(rs.code == 0){
          this.initLoading = false;
          const { data } = rs;
          this.total = Number(data.total);
          if(isRefresh){
            let result = {};
            data.list.forEach(item=>{
              result[item.count_months.month] = item;
            });
            this.list = result;

          }else{
            let oldList = JSON.parse(JSON.stringify(this.list));
            for(var i=0;i<data.list.length;i++){
              let month = data.list[i].count_months.month;
              if(oldList[month]){
                oldList[month].list = oldList[month].list.concat(data.list[i].list)
              }else{
                oldList[month] = data.list[i]
              }
            }
            this.list = oldList;
          }
          var len = 0;
          let keys = Object.keys(this.list)
          for(var i=0 ,klen = keys.length;i<klen;i++){
              len += this.list[keys[i]].list.length;
          }
          if(this.total>len){
            this.page++;
          }else{
            this.config.end = true;
          }
        }else{
          this.initLoading = false;
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }

      this.loading = false;
    },
    openPup(){
      if(this.pupStatus){
        this.pupStatus=false;
      }else{
        this.pupStatus=true;
      }

    }
  }
}
</script>

<style lang="less" scoped>
  .filter{
    position: fixed;
    top:28px;
    right:30px;
    z-index: 999999999;
    img{
      width: 38px;
      height:38px;
    }
  }
  .bill{
    .month{
      position:sticky;
      z-index:3;
      top:@app-header-height;
      padding:20px 30px 20px;
      font-size:30px;
      background: #edeef0;
      h4{
        color:#292929;
        margin-bottom:20px;
        line-height: 1;
      }
      p{
        color:#999;
        margin-bottom:20px;
        line-height: 1;
      }
      p:last-child{
        margin-bottom:0;
      }
    }
    ul.list{
      background: #fff;
      padding-left:30px;
      li{
        padding:20px 0;
        display: flex;
        display:-webkit-flex;
        flex-direction: row;
        align-items: center;
        .header-img{
          width:100px;
          height:100px;
          margin-right:20px;
          img{
            width:100%;
            height:100%;
            border-radius: 100px;
          }
        }
        .info{
          flex: 1;
          position: relative;
          max-width:590px;
          &:after{
            content:"";
            width:100%;
            height:1px;
            background: #ededed;
            position: absolute;
            bottom:-20px;
          }
          p.sub_remark{
            font-size:20px;
            color:#f05521;
          }
          h4{
            font-size:30px;
            color:#292929;
            margin-top:13px;
            padding-right:30px;
            font-weight: normal;
            &::after {
              content: '';
              clear: both;
              display: table;
              height: 0;
            }
            span:last-child{
              float: right;
              width: 50%;
              overflow: hidden;

              white-space: nowrap;
              display: inline-block;
              text-align: right;
              font-weight: normal;
            }
            span:first-child{
              width: 50%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: inline-block;

            }
            span.reduce{
              color:#f05521;
            }
          }
          p{
            color:#999;
            font-size:24px;
            padding-right:30px;
            span:last-child{
              float: right;
              color:#999;
            }
            span.on{
              color:#d39b00;
            }
          }
        }

      }
    }
  }


  .pup-common{
    position: fixed;
    top: 88px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    .mask{
      background: rgba(0,0,0,0.3);
      width:100%;
      height:100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
    }
    .con{
      position: absolute;
      top:0;
      background: #fff;
      width:100%;
      ul{
        padding:30px;
        li{
          width:213px;
          line-height:60px;
          font-size:28px;
          color:#666;
          float: left;
          text-align: center;
          background: #edeef0;
          margin-right:20px;
          margin-bottom:20px;
        }
        li:nth-child(3n){
          margin-right:0;
        }
        li.active{
          background: #f1f8ff;
          color:#2086f9;
        }
      }
      footer{
        clear: both;
        button{
          width:50%;
          border:none;
          font-size:30px;
          color:#2086f9;
          line-height: 100px;
          background: #fff;
          float: left;
          border-top:1px solid #ededed;
        }
        button:last-child{
          background: #2086f9;
          border-top:1px solid #2086f9;
          color:#fff;
        }
      }
    }
  }
</style>
